<html>
    <head>
        <meta charset="utf-8">
        <script src='https://cdn.bootcss.com/echarts/3.2.2/echarts.simple.js'></script>
        <script src='./echarts-wordcloud.js'></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id='main'></div>
        <script>
            var chart = echarts.init(document.getElementById('main'));

            var keywords = {
              "周杰伦": 22199,
              "漳卅按": 10288,
              "张三丰": 620,
              "冯巩": 274470,
              "嘟嘟嘟": 12311,
              "西金皮": 1206,
              "科鲁奇": 4885,
              "开狐狸": 32294,
              "风度单独": 18574,
              "啊哈哈": 38929,
              "山东": 969,
              "济南": 37517,
              "撇那个有": 12053,
              "历程": 57299,
              "东阿": 15418,
              "出口": 22905,
              "找不到": 5146,
              "干啥": 49487,
              "葡萄皮": 33837,
              "欧威": 3
            };

            var data = [];
            for (var name in keywords) {
                data.push({
                    name: name,
                    value: Math.sqrt(keywords[name])
                })
            }

            var maskImage = new Image();

            var option = {
                series: [ {
                    type: 'wordCloud',
                    sizeRange: [10, 100],
                    rotationRange: [-90, 90],
                    rotationStep: 45,
                    gridSize: 2,
                    shape: 'triangle',
                    maskImage: maskImage,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        }
                    },
                    data: data.sort(function (a, b) {
                        return b.value  - a.value;
                    })
                } ]
            };

            maskImage.onload = function () {
                option.series[0].maskImage
                chart.setOption(option);
            }

            maskImage.src = './logo1.png';
        </script>
    </body>
</html>